<template>
	<view class="main">
		<view class="ower-title">我的</view>
		<view class="user" >
			<view class="left">
				<image :src="user.path || defaultPath" mode="aspectFit"></image>
			</view>
			<view class="right">
				<view class="user-name">{{user.username}}</view>
				<view class="user-time">注册时间:{{user.register_time}}</view>
			</view>
		</view>
		<view class="user-info">
			<view class="info-top">
				<view class="item-info">
					<view class="item-info-title">余额(元)</view>
					<view class="item-info-num">{{user.balance}}</view>
				</view>
				<view class="item-info">
					<view class="item-info-title">代金券</view>
					<view class="item-info-num">{{user.coupons}}</view>
				</view>
				<view class="item-info">
					<view class="item-info-title">总分红</view>
					<view class="item-info-num">{{user.total_money}}</view>
				</view>
			</view>
			<view class="info-bottom">
				<view class="left" @click="goTab">充值</view>
				<view class="right" @click="go('cashout/cashout')">提现</view>
			</view>
		</view>
		<view class="page-title">财务管理</view>
		<view class="user-icons">
			<view class="icon-item" v-for="(item,index) in cw" :key="index" @click="go(item.page)">
				<image :src="item.img" mode="aspectFit"></image>
				<view class="icon-title">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="page-title">常用功能</view>
		<view class="user-icons">
			<view class="icon-item" v-for="(item,index) in gn" :key="index" @click="go(item.page)">
				<image :src="item.img" mode="aspectFit"></image>
				<view class="icon-title">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultPath:'../../static/img/wode/tx.png',
				user:{
					username:'',
					register_time:'',
					profile:'',
					total_money:0,
					coupons:0,
					balance:0,
					vip_type:''
				},
				cw:[
					{img:'../../static/img/wode/1-1.png',title:'资金明细',page:'zjdetail/zjdetail'},
					{img:'../../static/img/wode/1-2.png',title:'证书',page:'cert/cert'},
					{img:'../../static/img/wode/1-3.png',title:'交易所',page:'house/house'}
				],
				gn:[
					{img:'../../static/img/wode/2-1.png',title:'奖励机制',page:'profit/profit'},
					{img:'../../static/img/wode/2-2.png',title:'实名认证',page:'realname/realname'},
					{img:'../../static/img/wode/2-3.png',title:'银行卡绑定',page:'bindcard/bindcard'},
					{img:'../../static/img/wode/2-4.png',title:'我的团队',page:'member/member'},
					{img:'../../static/img/wode/2-5.png',title:'密码设置',page:'password/password'},
					{img:'../../static/img/wode/2-6.png',title:'邀请好友',page:'../yaoqing/yaoqing'},
					{img:'../../static/img/wode/2-8.png',title:'收货地址',page:'address/address'},
					{img:'../../static/img/wode/2-7.png',title:'退出账号',page:'../login/login'}
				]
			}
		},
		methods: {
			loadUser(){
				this.$http.get('/v1/get_my_info',res => {
					this.user = res.data
				})
			},
			//页面跳转
			go(url){
				if(url.indexOf('login/login') >  -1){
					this.$http.get('/v1/logout',res => {
						uni.removeStorageSync("USERNO")
						uni.removeStorageSync("Authorization")
						console.log(res,'--------')
					})
				}
				uni.navigateTo({
					url: url
				})
			},
			goTab(){
				uni.switchTab({
					url:'../kefu/kefu'
				})
			}
		},
		onLoad() {
			this.loadUser()
		}
	}
</script>

<style lang="scss" scoped>
	 page{
		
	 }
	 .main{
		 background-image: url(../../static/img/wode/bg.png);
		 background-size: contain;
		 background-repeat: no-repeat;
		 background-color: transparent;
		 padding-bottom: 20upx;
		 .ower-title{
			 color: $whiteColor;
			 font-size: 36upx;
			 height: 50upx;
			 line-height: 50upx;
			 font-weight: 550;
			 padding-top: 20upx;
		 }
		 .user{
			 display: flex;
			 height: 150uxp;
			 justify-content: left;
			 align-items: center;
			 margin-top: 60upx;
			 .left{
				 width: 150upx;
				 height: 150upx;
				 border-radius: 50%;
				 image{
					 width: 100%;
					 height: 100%;
				 }
			 }
			 .right{
				 display: flex;
				 flex-direction: column;
				 justify-content: left;
				 color: $whiteColor;
				 margin-left: 20upx;
				 .username{
					 height: 100upx;
					 line-height: 100upx;
					 font-size: 32upx;
				 }
				 .user-time{
					 height: 50upx;
					 line-height: 50upx;
					 font-size: 24upx;
					 opacity: 0.7;
				 }
			 }
		 }
		 .user-info{
			width: 690upx;
			height: 262upx;
			margin-top: 20upx;
			background-color: $whiteColor;
			box-shadow: 2px 2px 2px 2px #F8F8F8;
			border-radius: 20upx;
			.info-top{
				height: 182upx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-info{
					width: 30%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 180upx;
					.item-info-title{
						height: 50upx;
						color: #999999;
						font-size: 24upx;
					}
					.item-info-num{
						height: 60upx;
						color: #333333;
						font-weight: 500;
						font-size: 36upx;
					}
				}
			}
			.info-bottom{
				height: 80upx;
				 border-top: 1px solid #F2F2F2;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.left{
					color: #2A7BFF;
					font-size: 28upx;
					width: 50%;
					text-align: center;
					border-right: 1px solid #F2F2F2;
				}
				.right{
					color: #E51316;
					font-size: 28upx;
					width: 50%;
					text-align: center;
				}
			}
		}
		 .user-icons{
		 	display: flex;
			flex-wrap: wrap;
		 	justify-content: left;
		 	align-items: center;
		 	width: 100%;
			background-color: $whiteColor;
			box-shadow: 0px 0px 2px 2px #f2f2f2;
			border-radius: 20upx;
			margin-top: 20upx;
		 	.icon-item{
		 		display: flex;
		 		flex-direction: column;
		 		justify-content: center;
		 		align-items: center;
		 		width: 172upx;
				height: 180upx;
		 		image{
		 			width: 54upx;
		 			height: 54upx;
		 		}
		 		.icon-title{
		 			margin-top: 20upx;
		 			text-align: center;
		 		}
		 	}
		 }
	 }
</style>
